<docs>
  ## 申请信息查询
  ## props
</docs>
<template>
<div>
    <mheader class="index" @back_btn="goBack()" title="我的申请"></mheader>
  <div class="search">
    <!-- <span class="arrow" @click="goBack"></span>
    <h3 class="title">我的申请</h3> -->
    <ul class="item-wrap">
      <li class="item" v-for="(item, index) in list" :key="index">
        <div class="item-title-wrap">
          <p class="item-title-text">{{item.sqsj}}</p>
          <p class="item-title-btn" @click="inforCx(item.sqid)">推送消息</p>
        </div>
        <div class="item-detail-wrap">
          <p class="item-detail" @click="detailCx(item.sqid)">{{item.jdxzqh}}</p>
          <p class="item-detail-zt" v-if="item.lczt=='0'">已申请</p>
          <p class="item-detail-zt" v-if="item.lczt=='1'">已接收</p>
          <p class="item-detail-zt" v-if="item.lczt=='2'">已批复</p>
          <p
            class="item-detail-zt zt-dqy"
            v-if="item.lczt=='3'"
            @click="qycl(item.sqid,item.qyxx)"
          >待签约</p>
          <p class="item-detail-zt" v-if="item.lczt=='4'">已签约</p>
          <p class="item-detail-zt zt-btg" v-if="item.lczt=='-1'">不通过</p>
        </div>
      </li>
    </ul>
    <div class="no-text" v-show="list.length===0">暂无数据</div>
    <!-- 材料说明 开始 -->
    <message-card
      type="info"
      :visible.sync="materialVisible"
      btnText="签约"
      title="签约材料"
      @btnClick="GET_qy"
    >
      <dl class="material">
        <dl class="m-content">{{qyxx}}</dl>
      </dl>
    </message-card>
    <!-- 材料说明 结束 -->
  </div>
  </div>
</template>
<script>
import Mheader from '@/txry/group/mheader/mheader';
// import $ from '@/common/js/axios';
import MessageCard from "@/txry/group/messageCard/messageCard";

export default {
  components: { MessageCard,Mheader },
  name: "search",
  data() {
    return {
      list: [
        { sqsj: "2019.10.21", lczt: "0" },
        { sqsj: "2019.10.21", lczt: "1" },
        { sqsj: "2019.10.21", lczt: "2" },
        { sqsj: "2019.10.21", lczt: "3" }
      ],
      materialVisible: false,
      qyData: {
        sqid: "",
        zmlh: 1
      },
      qyxx: ""
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 获取申请列表
    // GET_reverseList() {
    //   $.get('/zmsq/wdsqCx').then((res) => {
    //     this.list = res.returnData.wdsq;
    //   }).catch(() => {});
    // },
    // inforCx(item) {
    //   const sqid = item;
    //   this.$router.push({ name: 'infor', query: { sqid } });
    // },
    // detailCx(item) {
    //   const sqid = item;
    //   this.$router.push({ name: 'detail', query: { sqid } });
    // },
    // 显示签约材料
    qycl(item, qyxx) {
      this.materialVisible = true;
      this.qyData.sqid = item;
      this.qyxx = qyxx;
    },
    // 签约
    GET_qy() {
      $.get("/sq/sqqy", {
        params: { sqid: this.qyData.sqid, zmlh: this.qyData.zmlh }
      })
        .then(res => {
          const flag = parseInt(res.returnData.executeResult, 10);
          if (flag === 1) {
            this.$alert(
              {
                type: "success",
                message: "签约成功"
              },
              () => {
                this.GET_reverseList();
              }
            );
          } else {
            this.$alert({
              type: "warning",
              message: res.returnData.message
            });
          }
        })
        .catch(() => {});
    }
  },
  created() {
    // this.GET_reverseList();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.search {
  .no-text {
    width: 984px;
    height: 300px;
    margin: 84px auto 0;
    border: $border;
    background: #fff;
    text-align: center;
    line-height: 300px;
  }
  .title {
    font-size: 45px;
    color: #fff;
    box-sizing: border-box;
    height: 8%;
    padding: $padding-base;
    background-color: #2e7ef7;
  }
  .item {
    border: $border;
    background-color: #fff;
    margin-bottom: $margin-base;
    .item-title-wrap,
    .item-detail-wrap {
      border-bottom: $border;
      padding: $padding-base;
      color: $color-text-label;
      display: flex;
    }
    .item-title-text,
    .item-detail-nr {
      flex: 0 1 70%;
    }
    .item-detail-nr {
      color: #000;
    }
    .item-detail-zt {
      flex: 0 1 30%;
      text-align: right;
      line-height: 2;
      font-size: $font-size-small;
    }
    .zt-btg {
      color: red;
    }
    .zt-dqy {
      // color: #98bef6;
      color: $color-blue_light;
    }
    .item-title-btn {
      flex: 0 1 30%;
      color: $color-blue-light;
      text-align: right;
      font-size: $font-size-small;
      &:before {
        content: "\e608";
        font-family: "icomoon";
        font-size: $font-size-large;
        padding-right: 20px;
      }
    }
    .item-detail {
      flex: 0 1 70%;
      color: $color-text-title;
      font-size: $font-size-small;
      padding-left: $padding-base * 2;
      position: relative;
      line-height: 2;
      &:before {
        position: absolute;
        left: 0;
        top: -35px;
        vertical-align: middle;
        padding-right: 20px;
        color: $color-blue-light;
        content: "\e60c";
        font-family: "icomoon";
        font-size: $font-size-ultra-plus;
      }
    }
  }
  .comments {
    color: $color-warning;
    font-size: $font-size-small;
    margin-left: $margin-base;
    margin-bottom: $margin-base;
  }
  /* 箭头 */
  .arrow::before {
    content: "";
    width: 30px;
    height: 30px;
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    transform: rotate(-45deg);
    float: left;
    margin: 50px 0 0 50px;
  }
}
</style>
